import React, {Component} from 'react';
import {Animated} from 'react-native';
import {View, Text, Colors, Button} from 'react-native-ui-lib'; // 引入 Button
import {TestCase, TestSuite} from '@rnoh/testerino';

export default class ViewTestScreen extends Component {
  constructor(props) {
    super(props);
    this.opacityAnim = new Animated.Value(0.2);
    this.widthAnim = new Animated.Value(100);

    this.state = {
      delayKey1: 0,
      delayKey2: 0,
    };
  }

  componentDidMount() {
    Animated.loop(
      Animated.sequence([
        Animated.timing(this.opacityAnim, {
          toValue: 1,
          duration: 1000,
          useNativeDriver: true,
        }),
        Animated.timing(this.opacityAnim, {
          toValue: 0.2,
          duration: 1000,
          useNativeDriver: true,
        }),
      ])
    ).start();

    Animated.loop(
      Animated.sequence([
        Animated.timing(this.widthAnim, {
          toValue: 250,
          duration: 1500,
          useNativeDriver: false, // 宽度变化不支持 native driver
        }),
        Animated.timing(this.widthAnim, {
          toValue: 100,
          duration: 1500,
          useNativeDriver: false,
        }),
      ])
    ).start();
  }

  render() {
    return (
      <TestSuite name="View">
        
        {/* 1. animated */}
        <TestCase itShould="animated: true (演示 Opacity 透明度渐变动画)">
          <View center padding-20>
            <View 
              animated 
              style={{
                opacity: this.opacityAnim, 
                backgroundColor: Colors.blue30, 
                padding: 20, 
                borderRadius: 10
              }}
            >
              <Text text60 white>呼吸效果</Text>
            </View>
          </View>
        </TestCase>
        <TestCase itShould="animated: true (演示 Width 宽度伸缩动画)">
          <View center padding-20>
            <View 
              animated 
              style={{
                width: this.widthAnim, 
                height: 50, 
                backgroundColor: Colors.red30, 
                justifyContent: 'center', 
                alignItems: 'center'
              }}
            >
              <Text text70 white>宽度变化</Text>
            </View>
          </View>
        </TestCase>

        {/* 2. backgroundColor */}
        <TestCase itShould="backgroundColor: 设置红色背景">
          <View center padding-20>
            <View padding-20 backgroundColor={Colors.red30}>
              <Text text60 white>Red Background</Text>
            </View>
          </View>
        </TestCase>
        <TestCase itShould="backgroundColor: 设置紫色背景">
          <View center padding-20>
            <View padding-20 backgroundColor={Colors.violet30}>
              <Text text60 white>Violet Background</Text>
            </View>
          </View>
        </TestCase>

        {/* 3. inaccessible */}
        <TestCase itShould="inaccessible: true (关闭辅助功能/屏幕阅读器)">
          <View center padding-20>
            <View padding-20 backgroundColor={Colors.grey70} inaccessible={true}>
              <Text>Screen Reader Ignores Me</Text>
            </View>
          </View>
        </TestCase>
        <TestCase itShould="inaccessible: false (开启辅助功能/默认行为)">
          <View center padding-20>
            <View padding-20 backgroundColor={Colors.grey70} inaccessible={false}>
              <Text>Screen Reader Reads Me</Text>
            </View>
          </View>
        </TestCase>

        {/* 4. reanimated */}
        <TestCase itShould="reanimated: true (作为 reanimated 容器渲染)">
          <View center padding-20>
            <View reanimated padding-20 backgroundColor={Colors.green30}>
              <Text text60 white>Reanimated View</Text>
            </View>
          </View>
        </TestCase>
        <TestCase itShould="reanimated: true (带样式属性)">
          <View center padding-20>
            <View reanimated padding-20 backgroundColor={Colors.orange30} style={{borderWidth: 2, borderColor: 'black'}}>
              <Text text60 white>Styled Reanimated</Text>
            </View>
          </View>
        </TestCase>

        {/* 5. recorderTag */}
        <TestCase itShould="recorderTag: 'mask' (用于测试录制标记)">
          <View center padding-20>
            <View recorderTag="mask" padding-20 backgroundColor={Colors.cyan30}>
              <Text>Tag: mask</Text>
            </View>
          </View>
        </TestCase>
        <TestCase itShould="recorderTag: 'unmask' (用于测试录制标记)">
          <View center padding-20>
            <View recorderTag="unmask" padding-20 backgroundColor={Colors.cyan30}>
              <Text>Tag: unmask</Text>
            </View>
          </View>
        </TestCase>

        {/* 6. renderDelay - 修改部分 */}
        <TestCase itShould="renderDelay: 1000ms (点击刷新按钮重置)">
          <View center padding-20>
            <Button 
              label="刷新 (重置延迟)" 
              size={Button.sizes.xSmall}
              onPress={() => this.setState({delayKey1: this.state.delayKey1 + 1})}
              marginB-10
            />
            <Text text80 grey40>点击刷新后等待1秒...</Text>
            {/* 使用 key 强制重新挂载组件，从而重新触发 renderDelay */}
            <View 
              key={`delay1-${this.state.delayKey1}`}
              renderDelay={1000} 
              padding-20 
              backgroundColor={Colors.yellow30} 
              marginT-10
            >
              <Text>延迟加载完成 (1s)</Text>
            </View>
          </View>
        </TestCase>
        <TestCase itShould="renderDelay: 3000ms (点击刷新按钮重置)">
          <View center padding-20>
            <Button 
              label="刷新 (重置延迟)" 
              size={Button.sizes.xSmall}
              onPress={() => this.setState({delayKey2: this.state.delayKey2 + 1})}
              marginB-10
            />
            <Text text80 grey40>点击刷新后等待3秒...</Text>
            <View 
              key={`delay2-${this.state.delayKey2}`}
              renderDelay={3000} 
              padding-20 
              backgroundColor={Colors.yellow30} 
              marginT-10
            >
              <Text>延迟加载完成 (3s)</Text>
            </View>
          </View>
        </TestCase>

        {/* 7. style */}
        <TestCase itShould="style: 自定义圆角和边框">
          <View center padding-20>
            <View style={{borderWidth: 3, borderColor: Colors.blue10, borderRadius: 20, padding: 15}}>
              <Text text70>Rounded Border Style</Text>
            </View>
          </View>
        </TestCase>
        <TestCase itShould="style: 自定义阴影 (Shadow/Elevation)">
          <View center padding-20>
            <View style={{backgroundColor: 'white', elevation: 8, shadowColor: '#000', shadowOffset: {width:0, height:4}, shadowOpacity: 0.3, padding: 15, margin: 10}}>
              <Text text70>Shadow Elevation Style</Text>
            </View>
          </View>
        </TestCase>

        {/* 8. useSafeArea */}
        <TestCase itShould="useSafeArea: true (使用安全区域)">
          <View center padding-20>
            <View useSafeArea padding-20 backgroundColor={Colors.purple50}>
              <Text white>SafeArea View</Text>
            </View>
          </View>
        </TestCase>
        <TestCase itShould="useSafeArea: false (不使用安全区域)">
          <View center padding-20>
            <View useSafeArea={false} padding-20 backgroundColor={Colors.purple50}>
              <Text white>Normal View</Text>
            </View>
          </View>
        </TestCase>

      </TestSuite>
    );
  }
}